<div class="modal-body" ng-controller="ShareModalCtrl" ng-init="init()">

	<div class="modal-header">
		<h2 class="modal-header-title">
			<i class="fa fa-share-square-o"></i>
			<span class="p-l-1">{{modalTitle}}</span>
		</h2>

		<ul class="gf-tabs">
			<li class="gf-tabs-item" ng-repeat="tab in tabs">
				<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
					{{::tab.title}}
				</a>
			</li>
		</ul>

		<a class="modal-header-close" ng-click="dismiss();">
			<i class="fa fa-remove"></i>
		</a>
	</div>

	<div class="modal-content" ng-repeat="tab in tabs" ng-if="editor.index == $index">
		<div ng-include src="tab.src" class="share-modal-body"></div>
	</div>

</div>

<script type="text/ng-template" id="shareEmbed.html">
	<div class="share-modal-header">
		<div class="share-modal-big-icon">
			<i class="fa fa-code"></i>
		</div>
		<div class="share-modal-content">
			<p class="share-modal-info-text">
				<!--The html code below can be pasted and included in another web page. Unless anonymous access
				is enabled the user viewing that page need to be signed into grafana for the graph to load.-->下面的 HTML 代码可以被粘贴和包含在其他的网页中。除非启用匿名访问，否则查看网页的用户需要登录 ATOPS 才能看到其中载入的图形。
			</p>

			<div ng-include src="'shareLinkOptions.html'"></div>

			<div class="gf-form-group gf-form--grow">
				<div class="gf-form">
					<textarea rows="5" data-share-panel-url class="gf-form-input" ng-model='iframeHtml'></textarea>
				</div>
			</div>
		</div>
	</div>
</script>

<script type="text/ng-template" id="shareExport.html">
	<dash-export-modal dismiss="dismiss()"></dash-export-modal>
</script>

<script type="text/ng-template" id="shareLinkOptions.html">
	<div class="gf-form-group">
		<gf-form-switch class="gf-form"
			label="当前的时间范围" label-class="width-12" switch-class="max-width-6"
			checked="options.forCurrent" on-change="buildUrl()">
		</gf-form-switch>
		<gf-form-switch class="gf-form"
			label="模板变量" label-class="width-12" switch-class="max-width-6"
			checked="options.includeTemplateVars" on-change="buildUrl()">
		</gf-form-switch>
		<div class="gf-form">
			<span class="gf-form-label width-12"><!--Theme-->主题</span>
			<div class="gf-form-select-wrapper width-10">
				<select class="gf-form-input" ng-model="options.theme" 
				ng-options="k as v for (k,v) in {'current':'当前', 'dark':'深色', 'light':'浅色'}"
				ng-change="buildUrl()"></select>
			</div>
		</div>
	</div>
</script>

<script type="text/ng-template" id="shareLink.html">
	<div class="share-modal-header">
		<div class="share-modal-big-icon">
			<i class="fa fa-link"></i>
		</div>
		<div class="share-modal-content">
			<p class="share-modal-info-text">
				<!--Create a direct link to this dashboard or panel, customized with the options below.-->创建仪表板或面板的直接链接，通过以下选项来进行自定义。
			</p>
			<div ng-include src="'shareLinkOptions.html'"></div>
			<div>
				<div class="gf-form-group">
					<div class="gf-form-inline">
						<div class="gf-form gf-form--grow">
							<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
						</div>
						<div class="gf-form">
							<button class="btn btn-inverse" clipboard-button="getShareUrl()"><i class="fa fa-clipboard"></i> <!--Copy-->复制</button>
						</div>
					</div>
				</div>
			</div>
			<div class="gf-form" ng-show="modeSharePanel">
				<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> <!--Direct link rendered image-->直接链接渲染图像</a>
			</div>
		</div>
</script>

<script type="text/ng-template" id="shareSnapshot.html">
	<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()">
		<div class="share-modal-header">
			<div class="share-modal-big-icon">
				<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
				<i ng-if="!loading" class="icon-gf icon-gf-snapshot"></i>
			</div>
      <div class="share-modal-content">
        <div ng-if="step === 1">
          <p class="share-modal-info-text">
            <!--A snapshot is an instant way to share an interactive dashboard publicly.
            When created, we-->快照是公开分享交互式仪表板的即时方式。创建快照后，我们 <strong><!--strip sensitive data-->删除敏感数据</strong> <!--like queries (metric, template and annotation) and panel links,
            leaving only the visible metric data and series names embedded into your dashboard.-->，例如查询（指标、模板和标注）和面板链接，只留下嵌入仪表板的可见指标数据和序列名称。
          </p>
          <p class="share-modal-info-text">
            <!--Keep in mind, your-->请注意，拥有该链接且可以访问该网址的 <strong><!--snapshot can be viewed by anyone-->任何人都可以查看快照</strong> <!--that has the link and can reach the URL.
            Share wisely.-->。分享需明智。
          </p>
        </div>

				<div class="share-modal-header" ng-if="step === 3">
					<p class="share-modal-info-text">
						<!--The snapshot has now been deleted. If it you have already accessed it once, It might take up to an hour before it is removed from
						browser caches or CDN caches.-->快照现已删除。如果您已经访问过快照，就可能需要最多一小时才能从浏览器缓存或 CDN 缓存中删除它。
					</p>
				</div>

				<div class="gf-form-group share-modal-options">
					<div class="gf-form" ng-if="step === 1">
						<span class="gf-form-label width-12"><!--Snapshot name-->快照名称</span>
						<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" >
					</div>
					<div class="gf-form" ng-if="step === 1">
						<span class="gf-form-label width-12"><!--Expire-->到期</span>
						<div class="gf-form-select-wrapper max-width-15">
							<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
						</div>
					</div>

					<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
						<div class="gf-form-row">
							<a href="{{snapshotUrl}}" class="large share-modal-link" target="_blank">
								<i class="fa fa-external-link-square"></i>
								{{snapshotUrl}}
							</a>
							<br>
							<button class="btn btn-inverse" clipboard-button="getSnapshotUrl()"><i class="fa fa-clipboard"></i><!-- Copy Link-->复制链接</button>
						</div>
					</div>
				</div>

				<div ng-if="step === 1">
					<p class="share-modal-info-text">
						<!--You may need to configure the timeout value if it takes a long time to collect your dashboard's metrics.-->如果收集仪表板上的指标需要很长时间，那么您可能需要配置超时值。
					</p>
				</div>

				<div class="gf-form-group share-modal-options">
					<div class="gf-form" ng-if="step === 1">
						<span class="gf-form-label width-12"><!--Timeout (seconds)-->超时（秒）</span>
						<input type="number" ng-model="snapshot.timeoutSeconds" class="gf-form-input max-width-15" >
					</div>
				</div>

				<div ng-if="step === 1" class="gf-form-button-row">
					<button class="btn gf-form-btn width-10 btn-success" ng-click="createSnapshot()" ng-disabled="loading">
						<i class="fa fa-save"></i>
						<!--Local Snapshot-->本地快照
					</button>
					<button class="btn gf-form-btn width-16 btn-secondary" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
						<i class="fa fa-cloud-upload"></i>
						{{sharingButtonText}}
					</button>
					<a class="btn btn-link" ng-click="dismiss()"><!--Cancel-->取消</a>
				</div>

				<div class="pull-right" ng-if="step === 2" style="padding: 5px">
					<!--Did you make a mistake?-->您犯了错？ <a class="pointer" ng-click="deleteSnapshot()" target="_blank"><!--delete snapshot.-->删除快照。</a>
				</div>
			</div>
		</div>
	</div>

</div>
</script>
